<template>
<div class="home">
    <!-- <GoTop></GoTop> -->
    <el-backtop >
       
    </el-backtop>
    <el-container>
        <el-header height="100px">
            <el-row :gutter="10" style="display: flex;align-items: center;">
                <el-col :span="8">
                    <!-- <div class="grid-content bg-purple" style="display: flex;align-items: center;justify-content: flex-end;">
                        
                        <img src="../assets/logo2.png" style="width:100%;">
                    </div> -->
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <img src="../assets/logo2.png" style="width:100%;">
                        </el-col>
                        <el-col :span="12">
                             
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="10" style="display: flex;justify-content:center">
                    <el-row :gutter="10" >
                        <el-col :span="4" class="tag-menu">
                            <el-button @click="home" icon="el-icon-office-building" type="text">首页</el-button>
                        </el-col>
                        <el-col :span="4"  class="tag-menu">
                            <!-- class="tag-button" -->
                            <el-button @click="classify" icon="el-icon-coin" type="text" >分类</el-button>
                        </el-col>
                        <el-col :span="4"  class="tag-menu">
                            <el-button @click="tag" icon="el-icon-price-tag" type="text" >标签</el-button>
                        </el-col>
                        <el-col :span="4"  class="tag-menu">
                            <el-button @click="file" icon="el-icon-time" type="text" >归档</el-button>
                        </el-col>
                        <el-col :span="4"  class="tag-menu">
                            <el-button @click="about" icon="el-icon-info" type="text" >关于我</el-button>
                        </el-col>
                        <el-col :span="4" class="tag-menu">
                            <el-button @click="message" icon="el-icon-message" type="text" >留言板</el-button>
                        </el-col>
                    </el-row>
                    
                </el-col>
                <el-col :span="4">
                   <el-input size="mini" placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                </el-col>
                <el-col :span="2">
                   <el-row :gutter="5">
                       <el-col :span="8" style="border:1px solid rgba(255, 255, 255, 0.2)">
                           <!-- class="tag-button" -->
                          <!-- <el-button icon="el-icon-message" type="text" >退出</el-button> -->
                       </el-col>
                       <el-col :span="16">
                          <el-button @click="login" icon="el-icon-user-solid" type="text">                              
                              登录                    
                          </el-button>
                       </el-col>
                   </el-row>
                </el-col>

            </el-row>
        </el-header>
        <el-main>
            <router-view/>

        </el-main>
        <el-footer height="auto">
            <el-row :gutter="10">
                <el-col :span="2">

                </el-col>
                <el-col :span="20">
                    <el-row :gutter="10">
                        <el-col :span="24" style="display: flex; justify-content: center;">
                            Copyright © 2020 - 2021  CPP   Designed by Chen pingping
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" style="margin-top:10px">
                        <el-col :span="24" style="display: flex; justify-content: center;">
                            桂ICP备20002883号-1                            
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" style="margin-top:10px">
                        <el-col :span="24" style="display: flex; justify-content: center;">
                            本站已安全运行 406 天 14 小时 51 分 48 秒                            
                        </el-col>
                    </el-row>
                    
                </el-col>
                <el-col :span="2">
                    
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
    <Login :centerDialogVisible.sync="centerDialogVisible"></Login>
</div>    
</template>
<script>
import GoTop from '../components/GoTop'
import Login from './Login'
export default{
    name:'Index',
    data(){
        return{
            input3:'',
            centerDialogVisible:false

        }
    },
    components:{
      GoTop,
      Login
    },
    methods:{
        //显示首页
        home:function(){
            this.$router.push({path:'/index/home'});
        },
        //显示分类页
        classify:function(){
            this.$router.push({path:'/index/classify'});

        },
        //显示标签页
        tag:function(){
            this.$router.push({path:'/index/tag'});
        },
        //显示归档页
        file:function(){
            this.$router.push({path:'/index/file'});
        },
        //显示关于我
        about:function(){
            this.$router.push({path:'/index/about'})
        },
        //显示留言板页面
        message:function(){
            this.$router.push({path:'/index/message'})
        },
         handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        login:function(){
            this.centerDialogVisible=true;

        }
    }
}
</script>
<style>
.home,html,body,#app{
    height:100%;

}
.el-container::before{
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .07;
    position: fixed;
    z-index: -999 !important;
    background: center/cover no-repeat;
    background-image: url(http://cdn.sakurac.cn/about.jpg);
}
.el-container{
    /* height:100%; */
}
.el-header{
    background-color:rgba(255, 255, 255, 0.2);
    color: #333;
    display: flex;
    align-items: center;
    border:1px solid #B3C0D1;
    box-shadow: 0px 15px 10px -15px #B3C0D1;
}
.el-main {
    background-color: rgba(255, 255, 255, 0.2);
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
}
.el-footer {
    padding-top:30px ;
    padding-bottom:30px ;
    background-color: rgba(85, 85, 85, 0.5);
    color: rgb(204, 204, 204);
}
.el-row{
    width:100%;
    /* border:1px solid blue; */
}
.el-col{
    /* border:1px solid red; */
}
.tag-menu{
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-button{
    font-size: 15px;
}
.tag-button{
    color:#303133;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>